<script type="text/javascript" src="js/jquery/jquery.form.js"></script>
<script type="text/javascript">
var afid = "<?php if(isset($_GET['id'])){ echo $_GET['id']; } ?>";
$(document).ready(function(){	

	$("#affiliateid").val(afid);

	jQuery.extend(jQuery.validator.messages, {
	  required: '*',
	  remote: '*'
	});

	$("#driversinformationform").validate({
		errorClass: "my-error-class",
		validClass: "my-valid-class",
		debug: false,
		rules: {
			name: "required",
			contactno: "required"
		},
		submitHandler: function(form){
			$.post("query/add_drivers.php", $("#driversinformationform").serialize(), function(data){
				alert(data);
				cleanDiv();
				window.location.replace("panel.php?page=drivers");
			});
		}
	});
	
	
	$("#companyname").autocomplete({
			source: "query/getcompanyinfo.php",
			minLength: 2,
			open: function() {
				$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
			},
			close: function() {
				$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
			}
	});
	
	$('#photoimg').live('change', function() { 
		$("#picpreviewdriver").html('');
		$("#picpreviewdriver").html('<img src="images/loader.gif" alt="Uploading...."/>');
		$("#imageform").ajaxForm({
			target: '#picpreviewdriver'
		}).submit();
	});
	
	$("#btnCleardriver").click(function(){
		$('#imageform').each(function(){
			this.reset();
		});
		$("#picpreviewdriver").empty();
	});
	
	
	function cleanDiv(){
		$('#imageform').each(function(){
			this.reset();
		});
		$("#picpreviewdriver").empty();
		var frm_elements =  driversinformationform.elements;
			for (i = 0; i < frm_elements.length; i++)
			{
				field_type = frm_elements[i].type.toLowerCase();
				switch (field_type)
				{
				case "text":
				case "password":
				case "textarea":
				case "hidden":
					frm_elements[i].value = "";
					break;
				case "radio":
				case "checkbox":
					if (frm_elements[i].checked)
					{
						frm_elements[i].checked = false;
					}
					break;
				case "select-one":
				case "select-multi":
					frm_elements[i].selectedIndex = -1;
					break;
				default:
					break;
				}
			}
		}
 
});
</script>

<!--  date picker script -->
<link rel="stylesheet" href="css/datePicker.css" type="text/css" />
<script src="js/jquery/date.js" type="text/javascript"></script>
<script src="js/jquery/jquery.datePicker.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
        $(function()
{

// initialise the "Select date" link
$('#date-pick')
	.datePicker(
		// associate the link with a date picker
		{
			createButton:false,
			startDate:'01/01/2005',
			endDate:'31/12/2020'
		}
	).bind(
		// when the link is clicked display the date picker
		'click',
		function()
		{
			updateSelects($(this).dpGetSelected()[0]);
			$(this).dpDisplay();
			return false;
		}
	).bind(
		// when a date is selected update the SELECTs
		'dateSelected',
		function(e, selectedDate, $td, state)
		{
			updateSelects(selectedDate);
		}
	).bind(
		'dpClosed',
		function(e, selected)
		{
			updateSelects(selected[0]);
		}
	);
	
var updateSelects = function (selectedDate)
{
	var selectedDate = new Date(selectedDate);
	$('#d option[value=' + selectedDate.getDate() + ']').attr('selected', 'selected');
	$('#m option[value=' + (selectedDate.getMonth()+1) + ']').attr('selected', 'selected');
	$('#y option[value=' + (selectedDate.getFullYear()) + ']').attr('selected', 'selected');
}
// listen for when the selects are changed and update the picker
$('#d, #m, #y')
	.bind(
		'change',
		function()
		{
			var d = new Date(
						$('#y').val(),
						$('#m').val()-1,
						$('#d').val()
					);
			$('#date-pick').dpSetSelected(d.asString());
		}
	);

// default the position of the selects to today
var today = new Date();
updateSelects(today.getTime());

// and update the datePicker to reflect it...
$('#d').trigger('change');
});
</script>

<!--  start nav-outer-repeat................................................... END -->
 
 <div class="clear"></div>
 
<!-- start content-outer -->
<div id="content-outer">
<!-- start content -->
<div id="content">


<table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
<tr>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
	<th class="topleft"></th>
	<td id="tbl-border-top">&nbsp;</td>
	<th class="topright"></th>
	<th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
</tr>
<tr>
	<td id="tbl-border-left"></td>
	<td>
	<!--  start content-table-inner -->
	<div id="content-table-inner">
	
	<table border="0" width="100%" cellpadding="0" cellspacing="0">
	<tr valign="top">
	<td>
	
	
		<!--  start step-holder -->
		<div id="step-holder">
			<div class="step-no">1</div>
			<div class="step-dark-left">Add Driver Info.</div>
			<div class="step-dark-round">&nbsp;</div>
			<div class="clear"></div>
		</div>
		<!--  end step-holder -->
	
		<!-- start id-form -->
		<table border="0" cellpadding="0" cellspacing="0" id="id-form">
			<form id="imageform" method="post" enctype="multipart/form-data" action='query/ajaximage.php'>
				<th valign="top">Upload image:</th>
				<td> <input type="file" name="photoimg" id="photoimg" /></td> 
				<td> <div id="picpreviewdriver" style="position: absolute; top: 280px; left: 480px;"> <br><br><br>image shown here.... </div>  </td>
			</form>
		</table>
		
		<form id="driversinformationform" method="post" action="test.php" >
			<table border="0" cellpadding="0" cellspacing="0" id="id-form">
				<tr>
					<th valign="top">Company Name:</th>
					<td><input type="text" name="companyname" id="companyname" class="inp-form" placeholder="Company Name"/></td>
				</tr>
				<tr>
					<th valign="top">Driver:</th>
					<td><input type="text" id="name" name="name" autocomplete="off" class="inp-form" placeholder="Complete Name"/></td>
				</tr>
				<tr>
					<th valign="top">Driver contact:</th>
					<td><input type="text" id="contactno" name="contactno" autocomplete="off" class="inp-form" placeholder="Contact No."/></td>
				</tr>
				
				<tr>
					<th>&nbsp;</th>
					<td valign="top">
						<input type="submit" class="form-submit" />
						<input type="reset" id="btnCleardriver" value="" class="form-reset"  />
					</td>
					<td></td>
				</tr>
			
			</table>
			<label> <font color="red">note: fields with * are required.</label>
			<input type="hidden" id="affiliateid" name="affiliateid"/>
		</form>
	<!-- end id-form  -->

	</td>
	<td>
	
	
	<!--  start related-activities -->
	<div id="related-activities">
		<!--  start related-act-top -->
		<div id="related-act-top">
		<img src="images/forms/header_related_act.gif" width="271" height="43" alt="" />
	
		</div>
		<!-- end related-act-top -->
		
		<!--  start related-act-bottom -->
		<div id="related-act-bottom">
		
			<!--  start related-act-inner -->
			<div id="related-act-inner">
				
				
				<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
				<div class="right">
					<ul class="greyarrow">
						<li><a href="">Add City</a></li> 
					</ul>
				</div>
			
				
				<div class="clear"></div>
				<div class="lines-dotted-short"></div>
				
				<div class="left"><a href=""><img src="images/forms/icon_plus.gif" width="21" height="21" alt="" /></a></div>
				<div class="right">
					<ul class="greyarrow">
						<li><a href="">Add Terms-And-Conditions</a></li> 
					</ul>
				</div>
			
				<div class="clear"></div>
				
			</div>
			<!-- end related-act-inner -->
			<div class="clear"></div>
		
		</div>
		<!-- end related-act-bottom -->
	
	</div>
	<!-- end related-activities -->
	
	
	

</td>
</tr>
<tr>
<td><img src="images/shared/blank.gif" width="695" height="1" alt="blank" /></td>
<td></td>
</tr>
</table>
 
<div class="clear"></div>
 

</div>
<!--  end content-table-inner  -->
</td>
<td id="tbl-border-right"></td>
</tr>
<tr>
	<th class="sized bottomleft"></th>
	<td id="tbl-border-bottom">&nbsp;</td>
	<th class="sized bottomright"></th>
</tr>
</table>



<div class="clear">&nbsp;</div>

</div>
<!--  end content -->
<div class="clear">&nbsp;</div>
</div>
<!--  end content-outer -->


<div class="clear">&nbsp;</div>
